<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!-- v-:on进行事件绑定 -->
			<button v-on:click="doit()">点我</button>
			<!-- v-on可以简写为@ -->
			<button @click="changeWord()">使用变形的写法</button>
			{{msg}}
		</div>

	</body>
	<script>
	var app=new Vue({
		// el:用于元素的挂载，绑定页面上声明的元素的选择器
		el:"#app",
		// data指定vue中需要用到的数据对象
		data:{
			msg:"Hello World"
		},
		// 进行事件的指定，需要指定的事件，需要提前在methods里面进行声明
		methods:{
			doit:function(){
				alert("事件已触发")
			},
			changeWord:function(){
				// 在事件的里面可以通过this访问data中声明的数据变量
				this.msg="Hello vue"
			},
			// 课堂练习：模拟购物车的功能，
			// 1、在购物车书屋数量左右各有一个按钮
			// 2、当点击数量左侧的按钮，则显示购物数量递减
			// 3、当点击数量右侧的按钮，则显示购物数量递增
			// 4、当购物数量为0，不能继续递减
			// 5、当购物数量为10 ，不能继续增加
			
		}
	})
	</script>
</html>
